<template>
  <button
    class="pcy-button"
    @click="handleClick"
    :disabled="disabled"
    :class="[
      type ? 'pcy-button--' + type : '',
      {
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-disabled': disabled,
        'is-loading': loading,
      },
    ]"
  >
    <pcy-icon v-if="loading" icon="loading"></pcy-icon>
    <pcy-icon :icon="icon" v-if="icon && !loading" :class="icon"></pcy-icon>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: "pcy-button",
  props: {
    type: {
      type: String,
      default: "default",
    },
    plain: Boolean,
    round: Boolean,
    circle: Boolean,
    icon: {
      type: String,
      default: "",
    },
    loading: Boolean,
    disabled: Boolean,
  },
  data() {
    return {
      msg: "子组件",
    };
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
  created() {},
  mounted() {},
  computed: {},
};
</script>

<style lang="scss" scoped>
/* 普通按钮样式 */
.pcy-button {
  display: inline-block;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  color: #606266;
  text-align: center;
  background: #ffffff;
  outline: none;
}

.pcy-button--default:focus,
.pcy-button--default:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.pcy-button--default:active {
  color: #3a8ee6;
  border-color: #3a8ee6;
  outline: none;
}
/* 根据type不同 添加的样式 */

.pcy-button--text {
  border-color: transparent;
  color: #409eff;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.pcy-button--text:focus,
.pcy-button--text:hover {
  color: #66b1ff;
  border-color: transparent;
  background-color: transparent;
}

.pcy-button--primary {
  color: #ffffff;
  background: #599ef8;
  border-color: #409eff;
}

.pcy-button--primary:focus,
.pcy-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.pcy-button--success {
  color: #ffffff;
  background: #67c23a;
}

.pcy-button--success:focus,
.pcy-button--success:hover {
  background: #85ce61;
  border-color: #85ce61;
  color: #fff;
}

.pcy-button--info {
  color: #ffffff;
  background: #909398;
}

.pcy-button--info:focus,
.pcy-button--info:hover {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #fff;
}

.pcy-button--warning {
  color: #ffffff;
  background: #dca450;
}

.pcy-button--warning:focus,
.pcy-button--warning:hover {
  background: #ebb563;
  border-color: #ebb563;
  color: #fff;
}

.pcy-button--danger {
  color: #ffffff;
  background: #e47470;
}

.pcy-button--danger:focus,
.pcy-button--danger:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
}
//pain是否 添加样式

.pcy-button--default.is-plain:focus,
.pcy-button--default.is-plain:hover {
  color: #409eff;
  background: #ffffff;
  border-color: #409eff;
}

.pcy-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.pcy-button--primary.is-plain:focus,
.pcy-button--primary.is-plain:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.pcy-button--success.is-plain {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.pcy-button--success.is-plain:focus,
.pcy-button--success.is-plain:hover {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

.pcy-button--info.is-plain {
  color: #909399;
  background: #f4f4f5;
  border-color: #d3d4d6;
}
.pcy-button--info.is-plain:focus,
.pcy-button--info.is-plain:hover {
  background: #909399;
  border-color: #909399;
  color: #fff;
}

.pcy-button--warning.is-plain {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}
.pcy-button--warning.is-plain:focus,
.pcy-button--warning.is-plain:hover {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
}

.pcy-button--danger.is-plain {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.pcy-button--danger.is-plain:focus,
.pcy-button--danger.is-plain:hover {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

//round是否 添加样式
round {
  border-radius: 20px;
  padding: 12px 23px;
}
.pcy-button--default.is-round {
  @extend round;
}

.pcy-button--primary.is-round {
  @extend round;
}

.pcy-button--success.is-round {
  @extend round;
}

.pcy-button--info.is-round {
  @extend round;
}

.pcy-button--warning.is-round {
  @extend round;
}

.pcy-button--danger.is-round {
  @extend round;
}

// circle是否 添加样式
circle {
  border-radius: 50%;
  padding: 12px;
}
.pcy-button--default.is-circle {
  @extend circle;
}

.pcy-button--primary.is-circle {
  @extend circle;
}

.pcy-button--success.is-circle {
  @extend circle;
}

.pcy-button--info.is-circle {
  @extend circle;
}

.pcy-button--warning.is-circle {
  @extend circle;
}

.pcy-button--danger.is-circle {
  @extend circle;
}

//是否添加disabled  -- 不加镂空
.pcy-button--text.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
  border: none;
}
.pcy-button--default.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #ebeef5;
}

.pcy-button--primary.is-disabled {
  color: #fff;
  background-color: #a0cfff;
  background-image: none;
  border-color: #a0cfff;
  cursor: not-allowed;
}

.pcy-button--success.is-disabled {
  color: #fff;
  background-color: #b3e19d;
  border-color: #b3e19d;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--info.is-disabled {
  color: #fff;
  background-color: #c8c9cc;
  border-color: #c8c9cc;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--warning.is-disabled {
  color: #fff;
  background-color: #f3d19e;
  border-color: #f3d19e;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--danger.is-disabled {
  color: #fff;
  background-color: #fab6b6;
  border-color: #fab6b6;
  background-image: none;
  cursor: not-allowed;
}

//是否添加disabled  -- 加镂空
.pcy-button--default.is-disabled.is-plain {
  background-color: #fff;
  border-color: #ebeef5;
  color: #c0c4cc;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--primary.is-disabled.is-plain {
  color: #8cc5ff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--success.is-disabled.is-plain {
  color: #a4da89;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--info.is-disabled.is-plain {
  color: #bcbec2;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--warning.is-disabled.is-plain {
  color: #f0c78a;
  background-color: #fdf6ec;
  border-color: #faecd8;
  background-image: none;
  cursor: not-allowed;
}

.pcy-button--danger.is-disabled.is-plain {
  color: #f9a7a7;
  background-color: #fef0f0;
  border-color: #fde2e2;
  background-image: none;
  cursor: not-allowed;
}

//兄弟选择符 相邻且同级  会选中.pcy-button 后面的 .pcy-button
.pcy-button + .pcy-button {
  margin-left: 10px;
}

//设置 class 属性值包含 "pcy-icon-" 下的span
.pcy-button [class*="pcy-icon-"] + span {
  margin-left: 5px;
}

.pcy-button.is-loading {
  position: relative;
  pointer-events: none;
}
</style>